當您使用jQuery來操作DOM(文件物件模型)時,您可以輕鬆地添加、刪除、修改和查詢HTML元素和它們的屬性,使您能夠實現互動式和動態的網頁效果。
獲取或設置元素的文本內容
var text = $("p").text();
console.log(text); // 輸出段落的文本內容
獲取文本內容
$("p").text("這是新的文本內容");
設定文本內容
獲取或設置表單元素的值。
var value = $("input").val();
console.log(value); // 輸出輸入元素的值
獲取輸入元素的值
$("input").val("新的值");
設置輸入元素的值
獲取或設置元素的HTML內容
var htmlContent = $("#myDiv").html();
console.log(htmlContent); // 輸出元素的HTML內容
獲取元素的HTML內容
$("#myDiv").html("<p>這是新的HTML內容</p>");
設置元素的HTML內容
獲取或設置元素的屬性值
var src = $("img").attr("src");
console.log(src); // 輸出圖片的src屬性值
獲取屬性值
$("img").attr("alt", "替代文字");
設置屬性值
將元素或內容追加到選擇的元素內部
$("#myDiv").append("<p>這是追加的內容</p>");
將元素或內容插入到選擇的元素內部的開頭位置
$("#myDiv").prepend("<p>這是插入的內容</p>");
在選擇的元素之後插入新元素或內容
$("#myElement").after("<p>這是新的內容</p>");
在選擇的元素之前插入新元素或內容
$("#myElement").before("<p>這是新的內容</p>");
從DOM中刪除選擇的元素
$("#myElement").remove();
從選擇的元素中刪除所有子元素和內容
$("#myElement").empty();